// 【17】发送弹幕View盒子 - （ps）弹幕编辑盒子（写弹幕发送弹幕）

/* 
（17）发送弹幕View盒子，此盒子是单独的  
（ps）弹幕编辑盒子（写弹幕发送弹幕）
 */


// 弹幕用px单位 方便计算
.danmuInputView{
	@extend .u-flex-column;
	@extend .u-flex-juc-sp-between;
	@include position(absolute);
	@include bottom(0);
	
	// top->轻触关闭区 、 
	&__danmu-i-v-top{
		// 轻触关闭区
		flex: 1;
		//background-color: rgba(33,52,188,0.35);
	}
	// bottom->弹幕编辑View区
	&__danmu-i-v-bottom{
		@extend .u-flex-column;
		@extend .u-flex-juc-center;
		@include padding(0 60rpx);
		
		background-color: #1d1d1f;
		
		// 弹幕input编辑区 45px （d-b-top）
		
		// d-b-top 45
		// d-b-bottom 185 35+10+(10*2)+(30*2)+(30*2)
		
		// 弹幕编辑相关功能View区
		&__d-b-top{
			@extend .u-flex-row;
			@extend .u-flex-nowrap;
			@extend .u-flex-juc-sp-between;
			@extend .u-flex-al-items-center;
			
			height: 45px;// px绝对单位，方便动态计算
			
			// 左边 分段器按钮 （弹幕颜色、弹幕表情、弹幕特效）
			&__d-b-t-left{
				
				//width: 200px;后面扩展了明星图像再改回200
				width: 150px;//页面上自动计算调整具体宽度
				&__public-VideoIcons-box{
					@extend .u-flex-row;
					@extend .u-flex-nowrap;
					
					&__item{
						@extend .u-flex-al-items-center;
						
						width: 50px;// px绝对单位，方便动态计算
						//background-color: #1dc;
						//border: 1px solid #C0C0C0;
						
					}
					
					// danmu-tabs-current （已迁移至最下方）
				}
			}
			
			// 中间 弹幕输入框
			&__d-b-t-conter{
				@extend .u-flex-al-items-center;
				
				// 输入框
				height: 35px;
				border-radius: 35px;
				background-color: #303030;
				//background-color: #FFFFFF;
				
				&__danmu-input{
					@extend .u-flex-juc-center;
					
					// 弹幕输入框的 class 类名
					
					height: 35px;
					color: #bbbbbb;
					font-size: goFull-FontSize(32rpx);
					//background-color: #1dc;
					//border: 1px solid #FFFFFF;
					
					
				}
				&__input-placeholder-class{
					// 弹幕输入框的 placeholder-class 类名
				}
				&__text{
					// 用户输入的字数提示（后面版本在做
					
					@include position(absolute);
					@include right(-20rpx);
					font-size: goFull-FontSize(28rpx);
					color: #bbbbbb
				}
			}
			
			// 右边 弹幕发送按钮
			&__d-b-t-right{
				@extend .u-flex-al-items-center;
				width: 100px;
				
				// 弹幕发送按钮
				&__danmu-fason-btn{
					@extend .u-flex-juc-center;
					@extend .u-flex-al-items-center;
					
					width: 80px;
					height: 35px;
					background-color: #666666;
					border-radius: 35px;
					&__text{
						font-size: goFull-FontSize(30rpx);
						font-weight: 700;
						color: #2e2e2e;
					}
				}
			}
		}
		
		// 键盘弹起时显示（站位高度=键盘高度）
		.keyboardheight{
			flex: 1;
		}
		
		// 热词 + 弹幕颜色（键盘收起时显示）
		// 弹幕热词 + 弹幕颜色或弹幕特效或弹幕表情等View区
		&__d-b-bottom{
			@extend .u-flex-column;
			
			// 35+10+(10*2)+(30*2)+(30*2)+(2*2)
			
			//background-color: #C0C0C0;
			
			// 弹幕热词
			&__b-Top-Hot-words{
				@extend .u-flex-row;
				@extend .u-flex-nowrap;
				@extend .u-flex-al-items-center;
				
				height: 35px;
				//background-color: #1dc;
				
				// 左边 热词：文字
				&__h-left{
					@extend .u-flex-al-items-center;
					
					width: 50px;
					//background-color: #fa1;
					
					&__text{
						color: #bbbbbb;
						font-size: goFull-FontSize(30rpx);
					}
				}
				// 右边 热词内容 item
				&__h-right{
					@extend .u-flex-column;
					
					&__r-row{
						@extend .u-flex-row;
						@extend .u-flex-nowrap;
						
						&__scroll-view{
							@extend .u-flex-row;
							@extend .u-flex-nowrap;
							@extend .u-flex-juc-start;//靠左对齐
							@extend .u-flex-al-items-center;//上下居中
								
							white-space: nowrap;
							//background-color: #1dc;
							
							// 热词内容
							&__item-text{
								@include margin(0 10rpx);
								@include padding(8rpx 20rpx);
								
								border-radius: 40px;
								border: 1px solid #8e8e90;
								
								&__text{
									font-size: goFull-FontSize(30rpx);
									color: #bbbbbb;
								}
							}
							&__item-right-zanwei{
								// 右边站位宽度
								width: 300px;
								height: 20px;
							}
						}
					}
				}
			}
			
			// 弹幕颜色
			&__b-Bottom-danmuText-Color{
				@extend .u-flex-column;
				@include padding(0 60rpx);
				@include m-top(20rpx);
				
				
				// 弹幕颜色tltie文字
				&__b-item-color{
					@extend .u-flex-column;
					@extend .u-flex-juc-center;
					
					// 20 由于有两排，所以算起来是20
					@include m-bottom(10px);
					
					&__title{
						@extend .u-flex-juc-center;
						
						// 60 由于有两排，所以算起来是60
						height: 30px;
						
						&__text{
							color: #f1f1f1;
							font-size: goFull-FontSize(32rpx);
							font-weight: 500;
						}
					}
					
					// 弹幕颜色 item 选项 View区
					&__Text-color{
						@extend .u-flex-row;
						@extend .u-flex-nowrap;
						
						// 60 由于有两排，所以算起来是60
						//background-color: #C0C0C0;
						
						&__scroll-view{
							@extend .u-flex-row;
							@extend .u-flex-nowrap;
							
							//background-color: #1dc;
							
							// 弹幕颜色 item
							&__item{
								@extend .u-flex-juc-center;
								@extend .u-flex-al-items-center;
								@include padding(0 50rpx);
								@include m-right(40rpx);
								
								height: 30px;
								border-radius: 40px;
								//border: 1px solid #00c08c;
								
								&__text{
									color: #F1F1F1;
									font-size: goFull-FontSize(30rpx);
								}
							}
							
							.current{
								border: 2px solid #00edf7;
							}
							
							&__item-right-zanwei{
								// 右边站位宽度
								width: 200px;
								height: 20px;
							}
						}
						
					}
					
				}
				
				
			}
			// ....
		}
	}
}

// 弹幕分段器item被选中（弹幕颜色、弹幕表情、弹幕特效等）
.danmuInputView__danmu-i-v-bottom__d-b-top__d-b-t-left__public-VideoIcons-box>.danmu-tabs-current{
	// 改变 FatFatMeng-icon 组件的选中色 color: #00edf7;
}

// 防止上方嵌套样式不生效
.danmuInputView>.keyboardheight,
.keyboardheight{
	// 键盘弹起时显示（站位高度=键盘高度）
	flex: 1;
}

.danmuInputView__danmu-i-v-bottom__d-b-bottom__b-Bottom-danmuText-Color__b-item-color__Text-color__scroll-view>.current{
	border: 2px solid #00edf7;
}

.danmuInputView__danmu-i-v-bottom__d-b-bottom__b-Bottom-danmuText-Color__b-item-color__Text-color__scroll-view>.fvip-item{
	padding: 0 15px;
}


